<template>
  <div>
    <div class='goods'>
      <scroll class='menu-wrapper' :data="goods">
        <ul>
          <li @click="onCategoryClick"
              class='menu-item border-1px'
              :class="{active: currentIndex===index}"
              v-for='(item, index) of goods'
              :key='item.type'
              :data-index="index">
            <span class='text'>
              <span class='icon decrease'></span>{{item.name}}
            </span>
          </li>
        </ul>
      </scroll>
      <scroll class='foods-wrapper'
              :listenScroll="listenScroll"
              :probeType = 'probeType'
              :data="goods"
              ref="foodList"
              @scroll="scroll">
        <ul>
          <li class='food-list food-list-hook' v-for='item of goods' :key='item.type' ref="foodGroup">
            <h1 class='title'>{{item.name}}</h1>
            <ul>
              <li class='food-item border-1px' v-for='food of item.foods' :key='food.id'>
                <div class='icon'>
                  <img width='57' height='57' v-lazy='food.icon'>
                </div>
                <div class='content'>
                  <h2 class='name'>{{food.name}}</h2>
                  <p class='description'>{{food.description}}</p>
                  <div class='price'>
                    ￥
                    <span class='now'>{{food.price}}</span>
                    <span class='old' v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                  <div class='cartcontrol-wrapper'>
                    <cartcontrol :food='food'></cartcontrol>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </scroll>
      <div class="loading-container" v-show="!goods.length">
        <loading :title="LoadingTitle"></loading>
      </div>
    </div>
  </div>
</template>

<script>
import cartcontrol from 'components/cartcontrol/cartcontrol'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import {getProductList} from 'api/goods'
import {ERR_OK} from 'api/config'
import {getData} from 'common/js/dom'
export default {
  name: 'goods',
  components: {
    cartcontrol,
    Scroll,
    Loading
  },
  data() {
    return {
      scrollY: -1,
      currentIndex: 0,
      diff: -1,
      goods: []
    }
  },
  methods: {
    _getProductList() {
      getProductList().then((res) => {
        if (res.code === ERR_OK) {
          this.goods = res.data
        }
      })
    },
    onCategoryClick(e) {
      // 在JS中，event.currentTarget获取到的是click事件绑定的DOM对象，event.target获取到的为当前所点击的DOM对象。
      let categoryIndex = getData(e.currentTarget, 'index')
      this.$refs.foodList.scrollToElement(this.$refs.foodGroup[categoryIndex], 0)
      this.currentIndex = parseInt(categoryIndex)
      console.log()
    },
    scroll(pos) {
      this.scrollY = pos.y
    },
    _calculateHeight() {
      this.listHeight = []
      const list = this.$refs.foodGroup
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < list.length; i++) {
        let item = list[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    }
  },
  created() {
    this.probeType = 3
    this.listenScroll = true
    this.LoadingTitle = '数据正在加载中...'
    this.listHeight = []
    this._getProductList()
  },
  watch: {
    goods() {
      setTimeout(() => {
        this._calculateHeight()
      }, 20)
    },
    scrollY(newY) {
      const listHeight = this.listHeight
      // 当滚动到顶部，newY>0
      if (newY > 0) {
        this.currentIndex = 0
        return
      }
      // 在中间部分滚动
      for (let i = 0; i < listHeight.length - 1; i++) {
        let height1 = listHeight[i]
        let height2 = listHeight[i + 1]
        if (-newY >= height1 && -newY < height2) {
          this.currentIndex = i
          this.diff = height2 + newY
          return
        }
      }
      // 当滚动到底部，且-newY大于最后一个元素的上限
      this.currentIndex = listHeight.length - 2
    }
  }
}
</script>

<style lang='stylus'>
  @import '~common/stylus/mixin.styl'
  @import '~common/stylus/variable.styl'
  .goods
    display: flex
    position: absolute
    top: 175px
    bottom: 48px
    width: 100%
    overflow: hidden
    .menu-wrapper
      touch-action: none
      position: relative
      flex: 0 0 80px
      width: 80px
      background: #f3f5f7
      .menu-item
        display: table
        height: 54px
        padding: 0 12px
        font-size: 0
        color: $color-text
        &:last-child > .text
          border-none()
        &.active
          position: relative
          background: $color-text-ll
          z-index: 10
          &:after
            content: ''
            position: absolute
            left: 0
            top: 0
            width: 4px
            height: 100%
            background: $color-tab-link-active
          .text
            font-weight: 700
        .text
          display: table-cell
          vertical-align: middle
          line-height: 14px
          width: 60px
          font-size: $font-size-small
          border-1px(rgba(7,17,27,0.2))
          .icon
            display: inline-block
            width: 12px
            height: 12px
            margin-top: 1px
            margin-right: 2px
            vertical-align: top
            background-size: 12px 12px
            background-repeat: no-repeat
            &.discount
              bg-image('discount_3')
            &.decrease
              bg-image('decrease_3')
            &.guarantee
              bg-image('guarantee_3')
            &.invoice
              bg-image('invoice_3')
            &.special
              bg-image('special_3')
    .foods-wrapper
      touch-action: none
      position: relative
      flex: 1
      .title
        padding-left: 14px
        height: 26px
        border-left: 2px solid #d0dde1
        line-height: 26px
        font-size: $font-size-small
        color: rgb(147,153,159)
        background: #f3f5f7
      .food-item
        display: flex
        padding-bottom: 16px
        margin: 18px
        border-1px(rgba(7,17,27,0.1))
        &:last-child
          border-none()
          margin-bottom: 0
        .icon
          flex: 0 0 57px
          margin-right: 10px
        .content
          flex: 1
          .name
            margin: 2px 0 8px 0
            height: 14px
            line-height: 14px
            font-size: $font-size-medium
            color: rgb(7,17,27)
          .description, .extra
            line-height: 12px
            font-size: 10px
            color: rgb(147,153,159)
          .description
            margin-bottom: 8px
          .extra
            .count
              margin-right: 12px
          .price
            line-height: 24px
            font-size: $font-size-small-s
            font-weight: 700
            color: rgb(240,20,20)
            .now
              margin-right: 8px
              font-size: $font-size-medium
            .old
              text-decoration: line-through
              color: rgb(147,153,159)
              font-size: $font-size-small-s
          .cartcontrol-wrapper
            position: absolute
            right: 0
            bottom: 12px
    .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
</style>
